<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>列表页面</title>
	<link rel="stylesheet" href="${request.contextPath}/plugins/bootstrap/css/bootstrap.css">
	<link rel="stylesheet" href="${request.contextPath}/plugins/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="${request.contextPath}/plugins/select2/select2.min.css">
	<link rel="stylesheet" href="${request.contextPath}/plugins/jquery-confirm/jquery-confirm.min.css">
	<link rel="stylesheet" href="${request.contextPath}/plugins/bootstrap-table/bootstrap-table.min.css">
	<link rel="stylesheet" href="${request.contextPath}/plugins/fancybox/jquery.fancybox.css">
	<link rel="stylesheet" href="${request.contextPath}/hadmin/css/animate.css">
	<link rel="stylesheet" href="${request.contextPath}/hadmin/css/style.css">
	<link rel="stylesheet" href="${request.contextPath}/hadmin/css/common.css">
</head>
<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">
	    <div class="row">
	    	<div class="col-xs-12">
		    	<div class="ibox">
		            <div class="ibox-content">
		            	<form class="form-inline m-b-xs">
		                    <div class="form-group">
								<#if permissions?seq_contains('knowledge:banner:save')>
									<button class="btn btn-sm btn-info" onclick="openAdd()" type="button">
										<i class="fa fa-plus"></i> 创建横幅
									</button>
								</#if>
		                    </div>
		                    <div class="form-group">
		                        <input type="text" id="search" name="search" placeholder="输入关键字搜索" class="form-control">
		                    	<button id="btn_query" class="btn btn-sm btn-info" type="button"><i class="fa fa-search"></i> 搜索</button>
								<button id="btn_reset" class="btn btn-sm btn-danger" type="button"><i class="fa fa-refresh"></i> 重置</button>
		                    </div>
		                </form>
		                <div class="table-responsive">
			                <table id="table" class="table table-striped table-bordered table-hover">
			                </table>
			            </div>
		            </div>
		        </div>
	      </div>
	    </div>
	</div>
	<!-- 通用js引入 -->
	<script src="${request.contextPath}/plugins/jQuery/jQuery-2.1.4.min.js"></script>
	<script src="${request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
	<script src="${request.contextPath}/plugins/select2/select2.full.min.js"></script>
	<script src="${request.contextPath}/plugins/layer/layer.min.js"></script>
	<script src="${request.contextPath}/plugins/laydate/laydate.js"></script>
	<script src="${request.contextPath}/plugins/jquery-confirm/jquery-confirm.min.js"></script>
	<script src="${request.contextPath}/plugins/validate/jquery.validate.min.js"></script>
	<script src="${request.contextPath}/plugins/validate/messages_zh.min.js"></script>
	<script src="${request.contextPath}/plugins/bootstrap-table/bootstrap-table.min.js"></script>
	<script src="${request.contextPath}/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
	<script src="${request.contextPath}/plugins/blockUI/jquery.blockUI.js"></script>
	<script src="${request.contextPath}/plugins/fancybox/jquery.fancybox.js"></script>
	<script src="${request.contextPath}/hadmin/js/content.js"></script>
	<script src="${request.contextPath}/hadmin/js/common.js?v=0.9"></script>
	<script>
		$(document).ready(function () {
			$('.fancybox').fancybox({
				openEffect: 'none',
				closeEffect: 'none'
			});
		});
		// 权限控制
		var editFlag = '${ permissions?seq_contains("knowledge:banner:edit") }';
		var deleteFlag = '${ permissions?seq_contains("knowledge:banner:remove") }';
		// 设置bootstrapTable配置
		$("#table").bootstrapTable({
			url: '${request.contextPath}/knowledge/banner/page', // 请求后台的URL（*）
			contentType: "application/x-www-form-urlencoded",// 用post请求，这个是必须条件，必须加上，get可以不用，亲测
			dataType: "json",
			method: "POST",// 请求方式（*）
			// toolbar: '#toolbar', // 工具按钮用哪个容器
			undefinedText: "-", // 为undefined时显示的字
			striped: false, // 是否显示行间隔色
			cache: false, // 是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
			pagination: true, // 是否显示分页（*）
			sortable: false, // 是否启用排序
			sortOrder: "asc", // 排序方式
			sortName: "", // 排序名称
			toolbar: '', // 指定工作栏
			loadingFontSize: 13, // 自定义加载文本的字体大小
			// search: true, // 是否使用客户端搜索
			queryParams: queryInitParams,// 传递参数（*）
			responseHandler: responseHandler,
			queryParamsType: "limit",
			sidePagination: "server", // 分页方式：client客户端分页，server服务端分页（*）
			pageNumber: 1, // 初始化加载第一页，默认第一页
			pageSize: 10, // 每页的记录行数（*）
			pageList: [10, 20, 50, 100], // 可供选择的每页的行数（*）
			showColumns: false, // 是否显示所有的列
			showRefresh: false, // 是否显示刷新按钮
			minimumCountColumns: 2, // 最少允许的列数
			clickToSelect: true, // 是否启用点击选中行
			strictSearch: true,
			// height: 460, // 行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
			showToggle: false, // 是否显示详细视图和列表视图的切换按钮
			uniqueId: "id", // 每一行的唯一标识，一般为主键列
			cardView: false, // 是否显示详细视图
			detailView: false, // 是否显示父子表
			showExport: false, // 是否显示导出
			exportDataType: 'basic', // 'basic', 'all', 'selected'.
			escape: true, // html转义
			// align: "center",
			columns: [
				{checkbox: true},
				{
					field: 'title',
					title: '横幅标题',
					align: "center"
				},
				{
					field: 'picUrl',
					title: '展示图片',
					align: "center",
					formatter: function (value, row, index) {
						var	strhtml =  '<a class="fancybox" href="'+ row.picUrl + '" title="查看图片">'
						strhtml += '	<img alt="image" src="'+ row.picUrl + '" style="width:50px; height:50px;"/>'
						strhtml += '</a>'
						return strhtml;
					}
				},
				{
					field: 'position',
					title: '展示位置',
					align: "center",
					formatter : function(value, row, index) {
						if(row.enabled == 1) {
							return '<font color="green">首页</font>';
						} else {
							return '<font color="red">其他</font>';
						}

					}
				},
				{
					field: 'startTime',
					title: '开始时间',
					align: "center"
				},
				{
					field: 'endTime',
					title: '结束时间',
					align: "center"
				},
				{
					field: 'enabled',
					title: '是否启用',
					align: "center",
					formatter : function(value, row, index) {
						if(row.enabled == 1) {
							return '<font color="green">启用</font>';
						} else {
							return '<font color="red">禁用</font>';
						}

					}
				},
				{
					field: 'createTime',
					title: '创建时间',
					align: "center"
				},
				{
					field: 'updateTime',
					title: '更新时间',
					align: "center"
				},
				{
					field: 'operation',
					title: '操作',
					width: '150',
					align: "center",
					formatter: function (value, row, index) {
						var actions = [];
						if (editFlag == 'true') {
							actions.push(' <button class="btn btn-info btn-xs" onclick="openEdit(\'' + row.id + '\')" type="button"><i class="fa fa-pencil-square-o"></i> 编辑</button>')
						}
						if (deleteFlag == 'true') {
							actions.push(' <a class="btn btn-danger btn-xs" data-trigger="ajax" data-submit-url="${request.contextPath}/knowledge/banner/delete?id=' + row.id + '" data-confirm="您确定要删除该条记录吗?"><i class="fa fa-times"></i> 删除</a>')
						}
						return actions.join('');
					}
				}
			],
			onLoadSuccess: tableLoadSuccess, // 成功渲染回调
		})

		// 表格查询参数构造
		function queryInitParams(params) {
			// 这里的键的名字和后端的变量名必须一致
			var temp = {
				limit: params.limit, // 页面大小
				offset: params.offset ,// 页码
				search: $("#search").val(),
			};
			return temp;
		}

		// 表格加载成功事件
		function tableLoadSuccess(data) {
			$(".bs-checkbox").css('vertical-align','middle');
		}

		// 表格响应数据
		function responseHandler(data) {
			return data;
		}

		// 触发检索
		$("#btn_query").click(function() {
			refreshTable();
		})

		// 重置检索条件
		$("#btn_reset").click(function() {
			$("#search").val("");
			refreshTable();
		});

		// 刷新表格数据请求
		function refreshTable() {
			var params = $("#table").bootstrapTable('getOptions');
			$("#table").bootstrapTable('refresh', params);
		}

		// 打开新增页面
		function openAdd() {
			openPage('新增横幅', '${request.contextPath}/knowledge/banner/add');
		}

		// 打开编辑页面
		function openEdit(id) {
			openPage('编辑横幅', '${request.contextPath}/knowledge/banner/edit/' + id);
		}

		// 删除单个记录(动态绑定js渲染的节点元素)
		$("body").delegate("*[data-trigger='ajax']", "click", function() {
			var dataUrl = $(this).attr("data-submit-url");
			var dataConfirm = $(this).attr("data-confirm");
			$.confirm({
				type: 'red',
				closeIcon: true,
				title: '警告',
				content: dataConfirm ? dataConfirm : '确认操作?',
				buttons: {
					'确认': {
						btnClass: 'btn-blue',
						action: function(){
							$.post(dataUrl,{},function(data){
								if(data.code==200){
									refreshTable();
									layer.msg(data.msg, { icon : 1 });
								}else{
									layer.msg(data.msg, { icon : 2 });
								}
							});
						}
					},
					'取消':{}
				}
			});
		})
	</script>
</body>
</html>

